<template>
    <div class="bg-white p-4">
        <!--  头部-->
          <div class="flex justify-between items-center px-6 mb-6">
            <span class="font-bold">2024-2025操作系统期末卷</span>
             <div class="right-div relative ">
                <el-input v-model="keyWord" placeholder="搜索设置项" style="width: 200px">
                </el-input>
                <el-icon  class="z-10 text-gray-400 absolute right-[10px] top-[10px] text-xl"> <Search /></el-icon>
             </div>
        </div>
        <!-- 设置相关的选项 -->
         <div class="px-6 space-y-4 text-gray-500 text-sm">
            <div class="flex items-start space-x-4 ">
                <div class="w-24">
                     <span>发放对象</span>
                </div>
               
                 <div class="flex items-center space-x-2" v-if="source=='modify'">
                    <span v-for="obj in settingsData.issueObject" class="bg-gray-100  text-sm rounded-3xl px-2 py-1">{{ obj }}</span>
                 </div>
                 <div class="w-full space-y-2" v-if="source=='publish'">
                    <div class="flex items-center space-x-2">
                        <el-button  round  @click="showIssueObjectDialog = true" :icon="Plus">发放对象</el-button>
                    </div>
                    <div class="border border-dashed border-gray-200 p-4 w-full" v-if="selectClass.length > 0">
                      <div class="flex flex-wrap space-x-3">
                    <div class="mt-4 bg-gray-200  rounded-full p-2 h-10 text-center " v-for="item in selectClass" :key="item.id">
                    <span class="text-gray-400">{{ item.name }}</span>
                  </div>
                </div>
                    </div>
                 </div>
            </div>
            <div class="flex items-center space-x-4">
             <div class="flex items-center w-24 space-x-2">
                    <span >开始时间</span>
                    <el-icon > <InfoFilled /></el-icon>
                </div>
              <el-radio-group v-model="settingsData.startTimeType" class="flex items-center">
                <el-radio :value="1">立即开始</el-radio>
                <el-radio :value="2">定时开始</el-radio>
              </el-radio-group>
              <el-date-picker
                v-model="settingsData.startTime"
                type="datetime"
                placeholder="选择日期时间"
                :disabled="settingsData.startTimeType !== 2"
              />
            </div>

            <div class="flex items-center space-x-4">
              <div class="flex items-center w-24 space-x-2">
                    <span >开始时间</span>
                    <el-icon > <InfoFilled /></el-icon>
                </div>
              <el-radio-group v-model="settingsData.endTimeType" class="flex items-center">
                <el-radio :value="1">立即截止</el-radio>
                <el-radio :value="2">定时截止</el-radio>
              </el-radio-group>
              <el-date-picker
                v-model="settingsData.endTime"
                type="datetime"
                placeholder="选择日期时间"
                :disabled="settingsData.endTimeType !== 2"
              />
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex items-center w-24 space-x-2">
                    <span >考试限时</span>
                    <el-icon > <InfoFilled /></el-icon>
                </div>
                <div class="space-x-2">
                    <el-input-number v-model="settingsData.timeLimit" :min="1" :max="180" />
                    <span>分钟</span>
                </div>
            </div>
            <!-- 单题限制 -->
            <div class="flex items-center space-x-4">
              <div class="flex items-center w-24 space-x-2">
                </div>
                <div class="space-x-2 w-full ml-6">
                     <el-checkbox v-model="settingsData.enableTimeLimit">单题限时</el-checkbox>
                     <div class="bg-gray-100/60 mt-2 " v-if="settingsData.enableTimeLimit">
                        <div class="flex items-center w-24 space-x-2"></div>
                        <div class="px-6 py-2 h-[300px]">
                            <el-radio-group v-model="settingsData.timeLimitType" class="grid gap-4">
                                <el-radio :value="0">所有题型统限时
                                <el-input v-model="settingsData.timeLimit" class="w-20 mx-2" ></el-input>分钟
                                </el-radio>
                                <el-radio :value="1">按题型限时
                                     <div class="flex flex-col space-y-4 absolute mt-4">
                                       <div>单选题每题限时 <el-input v-model="settingsData.timeLimit" class="w-20 mx-2" ></el-input>分钟(共30题)</div>
                                       <div>填空题每题限时 <el-input v-model="settingsData.timeLimit" class="w-20 mx-2" ></el-input>分钟(共4题)</div>
                                       <div>判断题每题限时 <el-input v-model="settingsData.timeLimit" class="w-20 mx-2" ></el-input>分钟(共5题)</div>
                                       <div>简答题每题限时 <el-input v-model="settingsData.timeLimit" class="w-20 mx-2" ></el-input>分钟(共4题)</div>
                                   </div>
                                </el-radio>
                                
                            </el-radio-group>
                        </div>
                     </div>
                </div>
            </div>
            <!-- 限时提交 -->
             <div class="flex items-center space-x-4">
                <div class="flex items-center w-24 space-x-2">
                    <span >限时提交</span>
                </div>
                <div class=" flex items-center space-x-4 w-full">
                   <el-select v-model="settingsData.timeLimitTimeType"  class="w-40">
                    <el-option label="学生作答" :value="1"></el-option>
                    <el-option label="考试开始" :value="0"></el-option>
                </el-select>
                 <el-input v-model="settingsData.timeLimitTime" class="w-20"/> <span>分钟后才可以交卷</span>
                </div>
            </div>
            <!-- 限时进入 -->
             <div class="flex items-center space-x-4">
                <div class="flex items-center w-24 space-x-2">
                    <span >限时进入</span>
                </div>
                <div class=" flex items-center space-x-4 w-full">
                 <el-input v-model="settingsData.timeLimitEnter" class="w-20"/> <span>分钟后不允许参加考试时</span>
                </div>
            </div>
            <!-- 防作弊设置 -->
             <div class="flex  space-x-4">
                <div class="flex w-24 space-x-2">
                    <span >防作弊设置</span>
                </div>
                <div >
                    <el-checkbox-group v-model="settingsData.antiCheatOption" class="flex flex-col  gap-4">
                        <el-checkbox  value="1" class="mb-4">题目乱序<br>
                            <p class="text-gray-400 absolute mt-2">学生接收到的题目显示顺序不同</p>
                        </el-checkbox>
                        <el-checkbox value="2" class="mb-4">选项乱序
                             <p class="text-gray-400 absolute mt-2">学生接收到的题目选项顺序不同</p>
                        </el-checkbox>
                        <el-checkbox value="3">禁止学生多终端考试
                             <p class="text-gray-400 absolute mt-2">勾选后，若检测到多个终端同时在考试页面，系统将停止前一个终端的作答，并提示学生可切换终端继续作答或退出考试</p>
                        </el-checkbox>
                        <el-checkbox value="4" >考试过程中抓拍监控
                        </el-checkbox>
                        <el-checkbox value="5" >人脸识别比对不通过，不允许进入考试
                        </el-checkbox>
                        <el-checkbox value="6" class="mb-4">
                            考试过程中开启屏幕检查，异常<el-input class="w-20" v-model="settingsData.antiCheatOther.screenCheckNum"/>次，系统强制收卷
                            <p class="text-gray-400 absolute mt-2 mb-2">监测到学生屏幕有分屏、悬浮窗等异常，系统将强制收卷收卷后，教师重新发放试卷，学生可以继续作答</p>
                        </el-checkbox>
                        <el-checkbox value="7" class="mb-4">
                            考试过程中截屏次数超过<el-input class="w-20" v-model="settingsData.antiCheatOther.screenCaptureCount" /> 次，系统强制收卷
                             <p class="text-gray-400 absolute mt-2">监测学生截屏搜题等行为。系统强制收卷后，教师重新发放考试，学生可以继续做答</p>
                        </el-checkbox>
                        <el-checkbox value="8" class="mb-4">
                            考试过程中屏幕抓拍权限被占用超过<el-input class="w-20"  v-model="settingsData.antiCheatOther.screenCapturePermissionLimit" /> 次，系统强制收卷
                            <p class="text-gray-400 absolute mt-2">系统强制收卷后，教师重新发放考试，学生可以继续做答</p>
                        </el-checkbox>
                        <el-checkbox value="9">考试过程中切屏控制</el-checkbox>
                        <el-checkbox value="10" class="mb-4">学生离开作答页面 <el-input class="w-20"  v-model="settingsData.antiCheatOther.studentLeaveScreen" />次，系统强制收卷
                            <p class="text-gray-400 absolute mt-2">系统强制收卷后，教师重新发放试卷，学生可以继续作答</p>
                        </el-checkbox>
                        <el-checkbox value="11" >只允许手机APP考试</el-checkbox>
                        <el-checkbox value="12"class="mb-4">
                            禁止学生使用
                            <el-select v-model="settingsData.antiCheatOther.examMode"  >
                                <el-option label="手机APP" value="app"></el-option>
                                <el-option label="电脑考试客户端" value="pc"></el-option>
                                <el-option label="手机APP或者电脑考试客户端" value="appAndPC"></el-option>
                            </el-select> 
                            考试
                            <p class="text-gray-400 absolute mt-2">新版本具备防作弊升级功能。勾选后，学生需提前升级新版手机APP才能进入考试</p>
                        </el-checkbox>

                    </el-checkbox-group>
                </div>
            </div>
            <!-- PC端考试须知 -->
             <div class="flex  space-x-4">
                <div class="flex  w-24 space-x-2">
                    <span >PC端考试须知</span>
                </div>
                <RichTextEditor :html="settingsData.pcExamNotice" @change="html=>{settingsData.pcExamNotice = html}"/>
                
            </div>
            <!-- 移动端端考试须知 -->
             <div class="flex  space-x-4">
                <div class="flex  w-24 space-x-2">
                    <span class="whitespace-nowrap" >移动端端考试须知</span>
                </div>
                {{ settingsData.mobileExamNotice }}
                <RichTextEditor :html="settingsData.examNoticeMobile" @change="getExamNoticeMobile"/>
            </div>
              <!-- 作答要求 -->
             <div class="flex items-center space-x-4">
                <div class="flex items-center w-24 space-x-2">
                    <span >作答要求</span>
                </div>
                <div class=" flex items-center space-x-4 w-full">
                   <el-checkbox v-model="settingsData.requirements" class="w-4 h-4">
                    考前 
                    <el-select v-model="settingsData.requirementsTime"  class="w-20">
                      <el-option label="5" :value="5"></el-option>
                      <el-option label="10" :value="10"></el-option>
                      <el-option label="20" :value="20"></el-option>
                      <el-option label="30" :value="30"></el-option>
                     </el-select> 
                     <span> 分钟可以进行考前准备</span>
                 </el-checkbox> 
                </div>
            </div>
              <!-- 学生作答上传附件类型 -->
             <div class="flex items-center space-x-4">
                <div class="flex items-center w-24 space-x-2"></div>
                <div class="  w-full">
                  <span>学生作答支持上传附件类型</span>
                  <div class="bg-gray-100/60">
                    <el-checkbox-group v-model="settingsData.attachmentType" class="flex flex-col  gap-4 p-4 ">
                          <el-checkbox  value="1" >拍照/录像</el-checkbox>
                          <el-checkbox  value="2">录音 </el-checkbox>
                          <el-checkbox  value="3" class="mb-4">上传附件
                            <p class="text-gray-400 absolute mt-2">附件类型包括本地文件（包含图片、音视频、文档）、云盘文件、笔记</p>
                        </el-checkbox>
                          <el-checkbox  value="4" class="mb-4" v-if="settingsData.attachmentType[2]">云文件
                            <p class="text-gray-400 absolute mt-2">不勾选时将屏蔽选择云盘文件</p>
                        </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
            </div>
         </div>
 <!-- 高级设置 -->
   <div class="px-6 space-y-4 text-gray-500 text-sm ">
        <div class="flex items-center space-x-4">
        <div class="flex items-center w-24 space-x-2 font-bold">高级设置</div>
        </div>   
        <!-- 题目设置 -->
        <div class="flex items-start space-x-4">
          <div class="flex items-center w-24 space-x-2">
              <span >题目设置</span>
          </div>
          <div class=" grid space-y-2 w-full">
              <el-checkbox v-model="settingsData.questionSetting" class="w-4 h-4">随机抽屉</el-checkbox>
              <span class="text-gray-400 text-[12px] ml-5">设置后，总分会平均分配到每小题上（分数除不尽时，保留1位小数）</span>
          </div>
        </div> 
        <!-- 交卷设置 -->
        <div class="flex items-center space-x-4">
          <div class="flex items-center w-24 space-x-2">
              <span >交卷设置</span>
          </div>
          <div class=" flex items-center space-x-4 w-full">
              <el-checkbox v-model="settingsData.submitSetting" class="w-4 h-4">考试到达截止时间后自动提交</el-checkbox>
          </div>
        </div> 
        <!-- 及格标准 -->
        <div class="flex items-center space-x-4">
          <div class="flex items-center w-24 space-x-2">
              <span >及格标准</span>
          </div>
          <div class=" flex items-center  space-x-4  ">
              <el-input v-model="settingsData.passStandard"  class="w-20"/> 分
              <el-tooltip effect="dark" placement="top-start">
                  <template #content>设置及格标准后，若允许重考，可设<br/>置学生未到达及格标准才允许重考 </template>
                  <el-icon><InfoFilled/></el-icon>
                </el-tooltip>
          </div>
        </div> 
        <!-- 重做设置 -->
        <div class="flex  space-x-4">
          <div class="flex  w-24 space-x-2">
              <span >重做设置</span>
          </div>
          <div class="space-y-4">
             <div class="flex flex-col gap-2 pl-2">
                <el-checkbox v-model="settingsData.retake" >允许学生重考
                  <el-input v-model="settingsData.retakeCount"  class="w-20" /> 次
                </el-checkbox>
                <el-checkbox v-model="settingsData.retakeRecord"  v-show="isHideRetake">学生重考保留前一次考试的作答记录</el-checkbox>
             </div>
             <el-checkbox v-model="settingsData.retakeCondition"  disabled v-show="isHideRetake"> 
                <el-select v-model="settingsData.finalScoreStandard"  class="w-40" disabled="">
                  <el-option label="最高成绩" value="max"></el-option>
                  <el-option label="最后一次开始成绩" value="last"></el-option>
                </el-select>
                为最终成绩
            </el-checkbox>
              
          </div>
        </div> 
        <!-- 试卷设置 -->
         <div class="flex  space-x-4">
          <div class="flex w-24 space-x-2">
              <span >试卷设置</span>
          </div>
          <div class=" flex items-center  space-x-4  ">
             <el-checkbox-group v-model="settingsData.paperSetting" class="flex flex-col  gap-2">
              <el-checkbox value="1">允许学生考后查看试卷</el-checkbox>
              <el-checkbox value="2" :disabled="isShow23">
                <el-select v-model="settingsData.viewAnswerTime"  class="w-40">
                  <el-option label="学生提交后" value="submitAfter"></el-option>
                  <el-option label="考试截止后" value="stopAfter"></el-option>
                </el-select>
                允许查看试卷
              </el-checkbox>
              <el-checkbox value="3" :disabled="isShow23">允许学生查看题目对错</el-checkbox>
              <el-checkbox value="4">允许学生查看分数</el-checkbox>
              <el-checkbox value="5" :disabled="isShow5">允许学生查看题型分数</el-checkbox>
              <el-checkbox value="6">允许学生查看考试等级</el-checkbox>
              <el-checkbox value="7">允许学生查看排名</el-checkbox>
              <el-checkbox value="8">学生考试完成后展示提示信息
                 <el-tooltip effect="dark"placement="top-start" >
                  <template #content>学生提交考试后，自定内容将在学生考<br/>试结果页展示 </template>
                  <el-icon class="text-gray-400/80 absolute  top-1.5 ml-1" size="large"><InfoFilled/></el-icon>
                </el-tooltip>
              </el-checkbox>
             </el-checkbox-group>
              
          </div>
        </div>
        <!-- 督促设置 -->
        <div class="flex  space-x-4">
          <div class="flex  w-24 space-x-2">
              <span >督促设置</span>
          </div>
          <div class=" flex flex-col  gap-2  w-full">
              <el-checkbox v-model="settingsData.sendNotice"  :disabled="source=='modify'">发送通知提醒</el-checkbox>
              <div class=" bg-gray-200 w-full p-4 " v-show="settingsData.sendNotice" v-if="source=='publish'">
                <el-radio-group v-model="settingsData.sendWay" class="flex  gap-2"> 
                  <el-radio value="immediately" >立即发放</el-radio>
                  <el-radio value="timed" >定时发放</el-radio>
                </el-radio-group>
                <div class="bg-white p-2  w-full" >
                  <el-input v-model="settingsData.sendNoticeContent" type="textarea" rows="4" placeholder="请输入内容"></el-input>
                </div>
              </div>
              <div>
                <el-checkbox v-model="settingsData.remindBefore" ></el-checkbox>
                考试结束前<el-input  class="w-20 mx-1" v-model="settingsData.remindTime"/>小时发通知提醒未交学生
               </div>
           
          </div>
        </div>
        <!-- 作答要求 -->
        <div class="flex  space-x-4">
          <div class="flex  w-24 space-x-2">
              <span >作答要求</span>
          </div>
          <div class=" flex items-center  space-x-4  ">
             <el-checkbox-group v-model="settingsData.answerRequirements" class="flex flex-col  gap-2">
              <el-checkbox value="copyQuestionStem" >学生作答不允许复制题干</el-checkbox>
              <el-checkbox value="copyAnswer" >学生作答不允许粘贴答案</el-checkbox>
             </el-checkbox-group>
          </div>
        </div>
        <!-- 评分设置要求 -->
        <div class="flex  space-x-4">
          <div class="flex  w-24 space-x-2">
              <span >评分设置</span>
          </div>
          <div class=" flex items-center  space-x-4  ">
             <el-checkbox-group v-model="settingsData.scoreSetting" class="flex flex-col  gap-2">
              <el-checkbox value="6" class="mb-4">
                  多选题未选全时 
                   <el-select v-model="settingsData.multiChoiceScoreStandard"  class="w-40" > 
                     <el-option value="half" label="得一半分">得一半分</el-option>
                     <el-option  value="2" label="得指定比例分数">
                      得指定比例分数
                      <el-tooltip effect="dark"placement="top-start" >
                        <template #content>如输入得分比例为40%，当题目满分<br/>为5分，学生未选全时则得2分 </template>
                        <el-icon class="text-gray-400/80 absolute  top-1.5 ml-1" size="large"><InfoFilled/></el-icon>
                      </el-tooltip>
                     </el-option>
                     <el-option  value="3" label="按选对数量得分">
                      按选对数量得分
                      <el-tooltip effect="dark"placement="top-start" >
                        <template #content>正确选项个数和题目满分平均分配，<br/>学生选对几个得对应分值。如满分9<br/>分的多选题（4选3），选对其中2个<br/>得6分，选错不得分。 </template>
                        <el-icon class="text-gray-400/80 absolute  top-1.5 ml-1" size="large"><InfoFilled/></el-icon>
                      </el-tooltip>
                     </el-option>
                   </el-select>
                   <p class="text-gray-400 absolute mt-2 mb-2">不勾选时全选对才给分</p>
               </el-checkbox>
             </el-checkbox-group>
          </div>
        </div>
        <!-- 师生互评 -->
        <div class="flex  space-x-4">
          <div class="flex  w-24 space-x-2">
              <span >师生互评</span>
          </div>
          <div class=" flex items-center  space-x-4  ">
             <el-switch v-model="settingsData.peerReview"></el-switch> 
          </div>
        </div>

    </div>  
        <!-- 提交按钮 -->
      <div class="mt-6 py-4 flex items-center justify-center bg-white">
        <el-button type="success"  round class="w-20">取消</el-button>
        <el-button type="primary"  round class="w-20" @click="updateSettings">确定</el-button>
      </div>

      <!-- dialog -->
        <el-dialog v-model="showIssueObjectDialog" title="发放对象" width="30%"  class="rounded-lg">
           <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
              <span :id="titleId" :class="titleClass">
                发放对象
              </span>    
            </div>
          </template>
           <div class="flex border-t border-b border-gray-200 min-h-[300px] overflow-y-auto">
        <!-- 添加知识点 -->
        <div class="py-4 w-[70%]">
           <div class="right-div relative pr-2 ">
                <el-input v-model="stuName" placeholder="搜索" class="w-full mr-4" @keyup.enter="searchStuName"/>
                <el-icon  class="z-10 text-gray-400 absolute right-[15px] top-[9px] text-xl "> <Search /></el-icon>
           </div>
          <div class="flex justify-between items-center px-4 py-2 mt-2 ">
              <div class="text-gray-400">班级/学生</div>
              <div class="flex items-center space-x-2">
                <span class="text-gray-400">全选</span>
                <el-checkbox v-model="selectAll" @change="handleSelectAll" />
              </div>
          </div>
             
           <!-- 列表区域 -->
      <div class="overflow-y-auto px-2">
        <div v-for="classItem in classList" :key="classItem.id" class="mb-2">
          <div
            class="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 rounded-lg"
            @click="toggleClass(classItem.id)"
          >
            <div class="flex items-center space-x-2">
              <el-icon class="transform transition-transform" :class="{ 'rotate-90': classItem.expanded }">
                <CaretRight />
              </el-icon>
              <span>{{ classItem.name }}</span>
              <span class="text-blue-500 text-sm">{{ classItem.tag }}</span>
            </div>
            <el-checkbox v-model="classItem.checked" @change="handleClassCheck(classItem)" />
          </div>

          <!-- 学生列表 -->
          <div v-show="classItem.expanded" class="pl-8 space-y-2">
            <div
              v-for="student in classItem.students"
              :key="student.id"
              class="flex items-center justify-between p-3"
            >
              <div class="flex items-center space-x-3">
                <img
                  :src="student.avatar"
                  :alt="student.name"
                  class="w-8 h-8 rounded-full object-cover"
                />
                <div>
                  <div class="font-medium">{{ student.name }}</div>
                  <div class="text-sm text-gray-500">{{ student.studentId }}</div>
                </div>
              </div>
              <el-checkbox v-model="student.checked" @change="handleStudentCheck(classItem)" />
            </div>
          </div>
        </div>
      </div>
        </div>
        <!--已选知识点  -->
        <div class="p-4  border-l w-[300px]">
          <div class="flex flex-wrap space-x-2">
              <div class="mt-4 border border-dashed border-blue-200 p-2 h-10 text-center " v-for="item in selectClass" :key="item.id">
                <span class="text-gray-400">{{ item.name }}</span>
              </div>
            </div>
           
        </div>
      </div>  

           <template #footer>
             <span class="dialog-footer">
               <el-button @click="showIssueObjectDialog = false">取消</el-button>
               <el-button type="primary" @click="confirmAddIssue">确定</el-button>
             </span>
           </template>
                
          </el-dialog>      
</div>
</template>

<script setup>
import { ref, computed, watch, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'         
import { Search,InfoFilled ,Plus} from '@element-plus/icons-vue';
import RichTextEditor from '@/components/RichTextEditor.vue';
const router = useRouter()
const route = useRoute()
const source = computed(() => route.params.source)
const paperId = computed(() => route.params.paperId)
// 搜索
const  keyWord = ref('')

//页面一加载的时候，获取试卷信息


// 设置相关的数据
const  settingsData = reactive({
      issueObject:['软件231','软件232'],//发放对象
      startTimeType:1,//开始时间类型
      startTime:null,//开始时间
      endTimeType:1,//截止时间类型
      endTime:null,// 截止时间
      timeLimit:90,//考试限时
      enableTimeLimit:false,//单题限时
      timeLimitType:0,//单题限时类型
      timeLimitTimeType:'学生作答',//限时提交
      timeLimitTime:45,//限时提交时间
      timeLimitEnter:null,//限时进入
      antiCheatOption:['1','2'],//防作弊设置
      antiCheatOther:{
        screenCheckNum:null,//屏幕检查过程中的屏幕异常次数
        screenCaptureCount:null,//考试中截屏次数
        screenCapturePermissionLimit:null,//考试中屏幕抓拍权限被占用次数
        studentLeaveScreen:null,//学生离开作答页面次数
        examMode:'app'// 考试方式 手机app11  电脑22  或者两者都支持33

      },//其他防作弊设置
      //PC端考试须知
      pcExamNotice:'<p><span style="color: rgb(0, 0, 0); font-size: 14px;"><strong>考试说明</strong></span><span style="color: rgb(0, 0, 0); font-size: 14px;">：<br>1、离开或退出考试界面答题计时不停止，请不要中途离开考试界面。<br>2、保持座位前的桌面干净，不要有与考试无关的内容。<br>3、考试时间截止或答题时间结束，如果处于答题页面，将自动提交试卷。<br>4、考试过程中如果出现页面卡死、题目空白情况，请尝试切换网络或退出重新进入考试。</span></p>',
      //移动端考试须知
      examNoticeMobile:'<p><span style="color: rgb(0, 0, 0); font-size: 14px;"><strong>考试说明</strong></span><span style="color: rgb(0, 0, 0); font-size: 14px;">：<br>1、本次考试全程进行录像监控，进行前后摄像头抓拍和屏幕抓拍，请调整好答题姿势，确保面部头像完整显示，屏幕抓拍只应用于考试监考，不会获取其他信息。<br>2、请不要中途离开考试界面，离开或退出考试界面会继续计时。<br>3、请将手机调至免打扰模式，避免来电引起考试中断。确保手机有充足电量或接入电源。<br>4、考试时间截止或答题时间结束，如果处于答题页面，将自动提交试卷。<br>5、保持座位前的桌面干净，不要有与考试无关的内容。<br>6、考试过程中如果出现页面卡死、题目空白情况，请尝试切换网络或退出重新进入考试。<br></span><span style="color: rgb(0, 0, 0); font-size: 14px;"><strong>系统声明</strong></span><span style="color: rgb(0, 0, 0); font-size: 14px;">：<br>由于本次考试需要进行人脸识别监控，系统需要开启您的摄像头，请确认同意。</span></p>',
     // 作答要求
      requirements:false,//作答要求
      //作答要求时间
      requirementsTime:5,
      // 学生作答支持上传附件类型
      attachmentType:['1','2'],//学生作答支持上传附件类型
      // 题目设置
      questionSetting:false,//题目设置

      // 交卷设置
      submitSetting:true,//交卷设置 考试到截止时间后自动提交
      // 及格标准
      passStandard:null,
      // 允许重做
      retake:false,//重做设置
      //重做次数
      retakeCount:null,//重做次数
      //保留学生重考钱一次的作答记录
      retakeRecord:false,//保留学生重考前一次的作答记录
      retakeCondition:true,
      //最终成绩标准
      finalScoreStandard:'max',//最终成绩
      //试卷设置
      paperSetting:[], // 选项依次的值为 1-8
      //查看答案时机
      viewAnswerTime:'submitAfter',//查看答案时机
      // 督促设置
      //发送通知提醒
      sendNotice:true,
      //发送方式
      sendWay:'immediately',
      sendNoticeContent:'试卷名称：2024-2025操作系统期末卷\n考试时间：08-04 16:25:39\n答题时长：60分钟',//发送通知提醒内容

      //考试结束前多少小时发通知提醒未交学生
      remindBefore:false,
      remindTime:null,
      // 作答要求
      answerRequirements:['copyQuestionStem','copyAnswer'],//作答要求
     //评分设置
     scoreSetting:[],
     //多选题得分标准
     multiChoiceScoreStandard:'half',
     //师生互评
     peerReview:false,

})

//是否隐藏 重做设置
const  isHideRetake = ref(true)
watch(()=>settingsData.retake,(newVal)=>{
  isHideRetake.value = false;
})
// 是否显示二三 是否显示5
const  isShow23 = ref(true)
const  isShow5 = ref(true)
watch(()=>settingsData.paperSetting,(newVal)=>{
  console.log(newVal);
  if(newVal.includes('1')){
    console.log(1);
    isShow23.value = false;
  }else{
    isShow23.value = true;
  }
  if(newVal.includes('4')){
    isShow5.value = false;
  }else{
    isShow5.value = true;
  }
  console.log(isShow23.value,isShow5.value);
},{deep:true})


const  getExamNoticeMobile = (html)=>{
    settingsData.examNoticeMobile = html
    console.log(html);
}

// 提交设置
const  updateSettings=()=>{
  console.log('更新试卷设置---------------');
}

// 添加发对象
const showIssueObjectDialog = ref(false)
//确定添加发放对象
const  confirmAddIssue=()=>{
  showIssueObjectDialog.value = false
  console.log('添加发放对象---------------');
  //todo 调用接口
}
// 发放对象弹出框
const  stuName = ref('')
const searchStuName=()=>{
  //点击搜索学生信息
}
const selectAll = ref(false);

const classList = ref([
  {
    id: '1',
    name: '软件231',
    tag: '已发放',
    expanded: false,
    checked: false,
    students: [
      {
        id: '1',
        name: '邓佳明',
        studentId: '230129040',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/786cd6ba4f96683bd6e97161c6e607d4.jpg',
        checked: false
      },
      {
        id: '2',
        name: '周诗梁',
        studentId: '230129039',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/627439ee4a50c86f3783be9f407f148b.jpg',
        checked: false
      },
      {
        id: '3',
        name: '仲佳凯',
        studentId: '230129038',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/ddbe1ef1e4fbb23c0504a2f1306a3088.jpg',
        checked: false
      }
    ]
  },
  {
    id: '2',
    name: '软件232',
    tag: '已发放',
    expanded: false,
    checked: false,
    students: [
      {
        id: '4',
        name: '张雨晴',
        studentId: '230129037',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/077f39cd70461ee49bc5d622fe6ca4c5.jpg',
        checked: false
      },
      {
        id: '5',
        name: '李明远',
        studentId: '230129036',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/f6f684eb584b88ccacaca7c16e7249ce.jpg',
        checked: false
      }
    ]
  }
]);

//被选中的班级
const selectClass = computed(() => {
  return selectAll.value ? classList.value : classList.value.filter(item => item.checked);
});
const toggleClass = (classId) => {
  const classItem = classList.value.find(item => item.id === classId);
  if (classItem) {
    classItem.expanded = !classItem.expanded;
  }
};

const handleClassCheck = (classItem) => {
  classItem.students.forEach(student => {
    student.checked = classItem.checked;
  });
  updateSelectAll();
};

const handleStudentCheck = (classItem) => {
  classItem.checked = classItem.students.every(student => student.checked);
  updateSelectAll();
};

const handleSelectAll = () => {
  classList.value.forEach(classItem => {
    classItem.checked = selectAll.value;
    classItem.students.forEach(student => {
      student.checked = selectAll.value;
    });
  });
};

const updateSelectAll = () => {
  selectAll.value = classList.value.every(classItem =>
    classItem.students.every(student => student.checked)
  );
};


</script >
<style lang="less" scoped>
.right-div .el-input {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}
.right-div .el-input :deep(.el-input__wrapper) {
  //background-color: #f3f4f6;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
</style>